Pie chart effect then explode

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.pie.js"></script>

Put this where you want the chart to show up:

<div style="margin-left: 50px">
    <canvas id="cvs" width="450" height="300">[No canvas support]</canvas>
<div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var pie1 = new RGraph.Pie({
            id: 'cvs',
            data: [21,12,25,17,7],
            options: {
                radius: 100,
                tooltips: ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'],
                labels: ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'],
                labelsSticksList: true,
                strokestyle: 'white',
                linewidth: 2,
                shadowBlur: 10,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowColor: '#666',
                textColor: '#999',
                textAccessible: true
            }
        })
        
        var explode = 20;

        function myExplode (obj)
        {
            window.__pie__ = pie1;

            for (var i=0; i<obj.data.length; ++i) {
                setTimeout('window.__pie__.explodeSegment('+i+',10)', i * 50);
            }
        }

        if (RGraph.ISOLD) {
            pie1.draw();
        
        } else if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
            pie1.roundRobin();
        
        } else {
            /**
            * The RoundRobin callback initiates the exploding
            */
            pie1.roundRobin(null, myExplode);
        }
    };
</script>